import React, { Suspense } from "react";
import PageLoading from "@/components/PageLoading";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import { Button, Card, Col, Input, message, Row, Table, Modal, Form, Select, Pagination } from "antd";
import { connect } from "dva";
import TenantAdd from "@/pages/TenantManagement/tenantAdd";
import moment from "moment";
import { updateStatus } from "@/services/tenantManagement";

const { Search } = Input;
const { confirm } = Modal;

class TenantManagement extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			dataSource: [],
			query: {
				current: 1,
				size: 10,
			},
			total: 3,
			loading: false,
			title: "添加租户",
		};
	}

	componentDidMount() {
		this.getList();
	}

	getList = () => {
		const { dispatch, form } = this.props;
		const { query } = this.state;
		const queryInfo = form.getFieldsValue()
		const obj = { ...query, ...queryInfo }
		this.setState({ loading: true }, () => {
			dispatch({
				type: "tenantManagement/getTenantList",
				payload: obj,
				callback: (res) => {
					this.setState({
						dataSource: res.records,
						total: res.total,
						loading: false,
					});
				},
			});
		});
	};

	queryByPage = (page, limit) => {
		let { query } = this.state;
		query.current = page;
		query.size = limit;
		this.setState({ query }, () => this.getList());
	};

	queryBySearch = (value) => {
		let { query } = this.state;
		query.search = value;
		query.current = 1;
		this.setState({ query }, () => this.getList());
	};

	openAddModal = (row) => {
		// this.setState({ title: row ? "编辑租户" : "添加租户" }, () => {
		// 	this.TenantAdd.initData(row);
		// });
		const { history } = this.props;
		history.push({
			pathname: "/enterprise/tenantManagement/addOrEdit",
			query: row ? { tenantId: row.id } : {},
		});
	};

	removeRecord = (row) => {
		const that = this;
		confirm({
			title: "确定要删除吗?",
			okText: "确定",
			okType: "danger",
			cancelText: "取消",
			onOk() {
				const { dispatch } = that.props;
				let { query } = that.state;
				dispatch({
					type: "tenantManagement/removeList",
					payload: { id: row.id },
					callback: (res) => {
						message.info(res.message);
						query.current = 1;
						that.setState({ query }, () => that.getList());
					},
				});
			},
			onCancel() { },
		});
	};

	resetPassword = (row) => {
		const { dispatch } = this.props;
		const that = this;
		Modal.confirm({
			title: "确定重置密码吗？",
			okText: "确定",
			cancelText: "取消",
			okType: "danger",
			onOk: () => {
				dispatch({
					type: "tenantManagement/toResetPassword",
					payload: { id: row.userId },
					callback: (res) => {
						message.info(res.message);
						that.getList();
					},
				});
			},
		});
	};

	changeTenantByClick = async (row) => {
		const { dispatch } = this.props;
		dispatch({
			type: "login/changeTenantByClick",
			payload: { tenantId: row.id },
		});
	};

	stopToEnable = async (row, status) => {
		let res = await updateStatus({ id: row.id, status });
		console.log(res);
		if (res.code === 0) {
			message.success('操作成功');
			this.getList();
		}
	}


	render() {
		const { dataSource, total, query, loading, title } = this.state;
		const { getFieldDecorator } = this.props.form;
		const columns = [
			{
				title: "企业名称",
				dataIndex: "name",
				key: "name",
				align: 'center',
			},
			{
				title: "账号",
				dataIndex: "username",
				key: "username",
				align: 'center',
			},
			{
				title: "租户管理员数量",
				dataIndex: "userAdminCount",
				key: "userAdminCount",
				align: 'center',
			},

			// {
			// 	title: "创建类型",
			// 	dataIndex: "tenantType",
			// 	key: "tenantType",
			// 	align: 'center',
			// 	render: type => {
			// 		switch (type) {
			// 			case 0:
			// 				return '纯网页';
			// 			case 11:
			// 				return '企业微信第三方应用';
			// 			case 12:
			// 				return '企业微信自建';
			// 			case 21:
			// 				return '钉钉第三方应用';
			// 			case 22:
			// 				return '钉钉自建';
			// 			case 3:
			// 				return 'teams';
			// 			default:
			// 				return ''
			// 		}
			// 	},
			// },
			{
				title: "创建时间",
				dataIndex: "createTime",
				key: "createTime",
				align: 'center',
				render: text => {
					if (text) {
						return moment(text).format("YYYY-MM-DD HH:mm:ss");
					} else {
						return "";
					}
				},
			},
			// {
			// 	title: "审查结果",
			// 	dataIndex: "reviewStatus",
			// 	key: "reviewStatus",
			// 	align: 'center',
			// 	render: text => {
			// 		switch (text) {
			// 			case "0":
			// 				return '已通过';
			// 			case "1":
			// 				return '未通过';
			// 			case "2":
			// 				return '未审查';
			// 			default:
			// 				return '已通过';
			// 		}
			// 	},
			// },
			{
				title: "有效期",
				dataIndex: "time",
				key: "time",
				align: 'center',
				render: (time,row) => {
					return row.startTime && row.endTime ? moment(row.startTime).format("YYYY-MM-DD") + '~' + moment(row.endTime).format("YYYY-MM-DD") : ''
				},
			},
			{
				title: "操作",
				align: 'center',
				render: (_, row) => {
					return (
						<span>
							<Button type="primary" onClick={() => this.openAddModal(row)}>编辑</Button>
							{row.status == '0' ? (
								<Button type="danger" style={{ marginLeft: 10 }} onClick={() => this.stopToEnable(row, 1)}>停用</Button>
							) : (
								<Button type="primary" style={{ marginLeft: 10 }} onClick={() => this.stopToEnable(row, 0)}>启用</Button>
							)}
							{/** <Button style={{ marginLeft: 10 }} onClick={() => this.resetPassword(record)}>重置密码</Button> */}
							<Button type="primary" style={{ marginLeft: 10 }} onClick={() => this.changeTenantByClick(row)}>进入系统</Button>
						</span>
					)
				}
			},
		];

		return (
			<Suspense fallback={<PageLoading />}>
				<PageHeaderWrapper>
					<Card bordered={false}>
						<Row>
							<Col span={20}>
								<Form layout="inline">
									<Form.Item>
										{getFieldDecorator('search', { initialValue: '' })(
											<Search placeholder={"请输入租户名或账号"} style={{ width: 250 }} onSearch={() => this.queryByPage(1, 10)} />
										)}
									</Form.Item>
									<Form.Item>
										<Button type="primary" onClick={() => this.queryByPage(1, 10)}>查询</Button>
									</Form.Item>
								</Form>
							</Col>
							<Col span={4} style={{ textAlign: "right" }}>
								<Button type="primary" onClick={() => this.openAddModal(null)}> 新增 </Button>
							</Col>
						</Row>
						<Row style={{ margin: "20px 0 0" }}>
							<Col span={24}>
								<Table
									loading={loading}
									dataSource={dataSource}
									columns={columns}
									rowKey={"id"}
									pagination={false}
								/>
								<Pagination
									total={total}
									current={query.current}
									onChange={this.queryByPage}
									showSizeChanger={true}
									showQuickJumper={true}
									onShowSizeChange={this.queryByPage}
									style={{ marginTop: 16, textAlign: 'right' }}
								/>
							</Col>
						</Row>
					</Card>
					<TenantAdd title={title} onRef={(ref) => (this.TenantAdd = ref)} getList={this.getList} />
				</PageHeaderWrapper>
			</Suspense>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(Form.create()(TenantManagement));
